<%@page import="com.mconnect.msurvey.controller.PlanManager"%>
<%@page import="com.mconnect.msurvey.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
 <%
// w celu poprawnie dzialajacej sesji:
response.setHeader("Cache-Control","no-store"); 
response.setHeader("Pragma","no-cache"); 
response.setDateHeader ("Expires", 0); 
%>     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	  <title>mSurvey</title>
	  <link rel="stylesheet" href="resources/css/ap.css">
	  <link rel="stylesheet" href="js/jQuery/demos.css">
	  <link rel="stylesheet" href="js/jQuery/themes/base/jquery.ui.all.css">
	  
	<script src="js/jQuery/jquery-1.8.2.js"></script>
	<script src="js/jQuery/ui/jquery.ui.core.js"></script>
	<script src="js/jQuery/ui/jquery.ui.widget.js"></script>
	<script src="js/jQuery/ui/jquery.ui.accordion.js"></script>
	<script src="js/jQuery/ui/jquery.ui.button.js"></script>
	<SCRIPT type="text/javascript" src="js/validationForm.js" charset="UTF-8"> </SCRIPT>
	
	<style type="text/css">
            @import "./js/dojo/dijit/themes/soria/soria.css";
            @import "./js/dojo/dojo/resources/dojo.css";
            #align-middle {height: 400px; overflow: hidden; position: relative;}
            #align-middle[id] {display: table; position: static;}
            #middle-wrap {position: absolute; top: 50%;} /* tylko dla IE */
            #middle-wrap[id] {display: table-cell; vertical-align:
                                  middle; width: 100%; position: static;}
            #middle {position: relative; top: -50%} /* tylko dla IE */
            #middle[id] {position: static;}
            .border {border: 1px solid #000; background-color: #eee;}
            
            .errorMessage{
	  		color: red;
	  		font-style: italic;
	  		font-size: large;
	  		}
	  		div#users-contain { width: 350px; margin: 20px 0; }
			div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
			div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }

        </style>
        
	<script>
	$(function() {
		$( "#accordion" ).accordion();
		
	});
	</script>
	<script type="text/javascript">
		function removeRow(then) {
			$(then).parents('tr').remove();
		}
		function recommendTable_addRow() {
			var content1 = $('#recommendTable').find('.prototype').html();
			$('#recommendTable').find('.content').append('<tr class="last">'+content1+'</tr>');
			return $('#recommendTable').find('.content').find('tr.last');
		}
		
	</script>  
  </head>

<body>
<div id="top" >
	<div class="sessionUser">
    	<div id="logoMconnect">
    		<img src="resources/images/top_logo.gif" width="84" height="59" alt="image001"/>
    	</div>
    	<div id="mConnect_txt">
        	mConnect<br/>al. Jana Pawła II 41c<br/>31-864 Kraków
       </div>
    	
      <%User user = (User) session.getAttribute("user");
      		if(user == null){ %>
      		<jsp:forward page="loginUserForm.jsp"></jsp:forward>
      		<%} %>
    </div>
    <img src="resources/images/kreska.png" class="kreska">
    <div class="header_txt">
      <p class="header_txt_1">mSurvey</p>
      <p class="header_txt_2">Ankiety</p>
    </div>
    
    <ul id=menu>
      <%if(user == null){  %>
    	<jsp:forward page="loginUserForm.jsp"></jsp:forward>
    	<%}else{ %>
			<li ><s:a action="index" id="hello">Witaj <%= user.getFirstname() + " " + user.getLastname() %></s:a></li>
			<li style="float: right"><s:a action="logoutUser">Wyloguj</s:a></li>
    </ul>
    
    <div id=kategorie>
    
      	<%	String region = request.getParameter("region");
      		if(region != null){%>
	      		<div style="float: left; width: 90%; margin-left:5%; background-color: #006633; color: white; text-align: center;">
					
						<h1>Zapisano ankiete!</h1>
						
				</div>
				<br>
			<%} 
      		PlanManager pM = new PlanManager(); 
          	int planName = pM.getId_planById_user(user.getId_user());
			%>
			<h1 style="text-align: center">Ankieta </h1>
			
			<form action="saveSurvey" method="post" id="form">
				<input type="hidden" name="id_user" value="<%= user.getId_user() %>" />
				<input type="hidden" name="id_plan" value="<%=planName %>">
				<table style="font-size: 13px; margin-bottom: 20px; margin-top: 20px;" >
						<tr>
							<td width="220px;">Miejsce przeprowadzenia ankiety: </td>
							<td >
								<% 
									if(region != null){%>
										<input type="text" name="survey.region" id="location" value="<%=region %>" style="width:250px;">
									<%}else{ %>
										<input type="text" name="survey.region" id="location" style="width:250px;">
									<%} %>
							</td>
						</tr>
					</table>
				<center>
				<div id="accordion">
					<h3>Pytanie nr 1</h3>
					<div>
						<h1>W jakim wieku Pan/Pani jest?</h1>
				        <br/><br/>
				        <table>
				        	<tr>
				                 <td width="40px" align="left"><input id="p1check1" type="radio" name="questions.question1" value="18-20" /></td>
				                 <td><label for="p1check1">18-20 lat</label><br/></td>
				           	</tr>
				          	<tr>
				                	<td width="40px" align="left"><input id="p1check2" type="radio" name="questions.question1" value="21-23" /></td>
				                    <td><label for="p1check2">21-23 lat</label><br/></td>
				            </tr>
				            <tr>
				                   <td width="40px" align="left"><input id="p1check3" type="radio" name="questions.question1" value="24-26" /></td>
				                   <td><label for="p1check3">24-26 lat</label><br/></td>
				            </tr>
				            <tr>
				                  <td width="40px" align="left"><input id="p1check4" type="radio" name="questions.question1" value="26" /></td>
				                  <td><label for="p1check4">powyżej 26 lat</label><br/></td>
				           	</tr>
				       	</table>
					</div>
					<h3>Pytanie nr 2</h3>
					<div>
						<h1>Czy studiuje Pani / Pan, czy wybiera się Pani/ Pan na studia?</h1>
				        <br/><br/>
				        <table>
				        	<tr>
				              	<td width="40px" align="left"><input id="p2check1" type="radio" name="questions.question2" value="Dziennie" /></td>
				                <td><label for="p2check1">Dziennie</label><br/></td>
				          	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p2check2" type="radio" name="questions.question2" value="Zaocznie" /></td>
				                <td><label for="p2check2">Zaocznie</label><br/></td>
				          	</tr>
				            <tr>
				               	<td width="40px" align="left"><input id="p2check3" type="radio" name="questions.question2" value="Nie studiuję" /></td>
				               	<td><label for="p2check3">Nie uczę się / nie studiuję (przejdź do pyt/ 4)</label><br/></td>
				            </tr>
				        </table>
					</div>
					<h3>Pytanie nr 3</h3>
					<div>
						<h1>Nazwa uczelni</h1>
				        <br/><br/>
				        <table>
				        	<tr>
				           		<td width="40px" align="left"><input id="p3check1" type="radio" name="questions.question6" value="AGH" /></td>
				                <td><label for="p3check1">AGH</label><br/></td>
				        	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" name="questions.question6" value="Politechnika Krakowska" /></td>
				                <td><label for="p3check2">Politechnika Krakowska</label><br/></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" name="questions.question6" value="Uniwersytet Jagieloński" /></td>
				                <td><label for="p3check2">Uniwersytet Jagieloński</label><br/></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" name="questions.question6" value="Uniwersytet Rolniczy" /></td>
				                <td><label for="p3check2">Uniwersytet Rolniczy</label><br/></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" name="questions.question6" value="Uniwersytet Ekonomiczny" /></td>
				                <td><label for="p3check2">Uniwersytet Ekonomiczny</label><br/></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" name="questions.question6" value="Krakowska Akademia" /></td>
				                <td><label for="p3check2">Krakowska Akademia</label><br/></td>
				           	</tr>
				           	<tr>
				                <td width="40px" align="left"><input id="p3check2" type="radio" name="questions.question6" value="Other" onclick="this.form.elements['other'].disabled = !this.checked" /></td>
				                <td><label for="p3check2">Inna</label> &nbsp <input type="text" name="other" id="otherUniversity" disabled="disabled" /><br/></td>
				           	</tr>
				   		</table>
					</div>
					<h3>Pytanie nr 4</h3>
					<div>
						<h1>Czy pracuje Pani / Pan obecnie?</h1>
				        <br/><br/>
				        <table>
				        	<tr>
				           		<td width="40px" align="left"><input id="p3check1a" type="radio" name="questions.question3" value="TAK" /></td>
				                <td><label for="p3check1a">TAK</label><br/></td>
				        	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p3check2a" type="radio" name="questions.question3" value="NIE" /></td>
				                <td><label for="p3check2a">NIE (przejdź do pyt/ 6)</label><br/></td>
				           	</tr>
				   		</table>
					</div>
					<h3>Pytanie nr 5</h3>
					<div>
						<h1>Czy myślała Pani / Pan o zmianie branży?</h1>
				        	<br/><br/>
				            <table>
				             	<tr>
				               		<td width="40px" align="left"><input id="p4check1" type="radio" name="questions.question4" value="TAK" /></td>
				                   	<td><label for="p4check1">TAK</label><br/></td>
				              	</tr>
				               	<tr>
				                   	<td width="40px" align="left"><input id="p4check2" type="radio" name="questions.question4" value="NIE" /></td>
				                   	<td><label for="p4check2">NIE </label><br/></td>
				               	</tr>
				          	</table>
				
					</div>
					<h3>Pytanie nr 6</h3>
					<div>
						<h1>W jakiej branży chciałbyś / chciałabyś pracować?</h1>
				        <br/><br/>
				        <table>
				           	<tr>
				           		<td width="40px" align="left"><input id="p5check1" type="checkbox" name="category.callCenter" value="TAK" /></td>
				               	<td ><label for="p5check1">Obsługa Klienta / Call Center</label><br/></td>
				           	</tr>
				            <tr>
				              	<td width="40px" align="left"><input id="p5check2" type="checkbox" name="category.it" value="TAK" /></td>
				             	<td><label for="p5check2">Informatyka / Programowanie</label><br/></td>
				         	</tr>
				           	<tr>
				             	<td width="40px" align="left"><input id="p5check3" type="checkbox" name="category.telecommunication" value="TAK" /></td>
				                <td><label for="p5check3">Telekomunikacja</label><br/></td>
				        	</tr>
				            <tr>
				                <td width="40px" align="left"><input id="p5check4" type="checkbox" name="category.publicRelations" value="TAK" /></td>
				              	<td><label for="p5check4">Marketing / Reklama / Public Relations</label><br/></td>
				            </tr>
				            <tr>
				                <td width="40px" align="left"><input id="p5check5" type="checkbox" name="category.sale" value="TAK" /></td>
				                <td><label for="p5check5">Sprzedaż</label><br/></td>
				            </tr>
				         </table>
					</div>
					<h3>Pytanie nr 7</h3>
					<div>
					<h2>Czy byłby Pan / Pani zainteresowany / zainteresowana zaproszeniem na rozmowę kwalifikacyjną?</h2> <br>
				 	<div id="users-contain" class="ui-widget" style="float: left; margin-left: 10%;" >
				 	<table id="recommendTable" class="ui-widget ui-widget-content"  style="text-align: center; margin-top: 20px; width: 750px;">
						<thead >
							
							<tr class="ui-widget-header ">
								<th colspan="2"></th>
								<th align="center">Imię</th>
						        <th align="center">Nazwisko</th>
						        <th align="center">Numer telefonu</th>
						        <th align="center">e-mail</th>
						        <th></th>
							</tr>
						</thead>
						<tbody class="content">
							<tr >
								<td colspan="2">Dane respondenta</td>
								<td><input type="text" value="" name="responder.firstname" id="firstname" /></td>
				                <td><input type="text" value="" name="responder.lastname" id="lastname" /></td>
				                <td><input type="text" value="" name="responder.phone" id="phone"/></td>
				                <td><input type="text" value="" name="responder.mail"/></td>
							</tr>
							<tr style="display:none;" class="prototype">
								<td colspan="2"></td>
								 <td><input type="text" value="" name="recommendFirstname" /></td> 
				                 <td><input type="text" value="" name="recommendedLastname" /></td>
				                 <td><input type="text" value="" name="recommendedPhone"/></td>
				                 <td><input type="text" value="" name="recommendedMail"/></td>
								<td><a title="Usuń" onclick="removeRow(this)" href="#"><img src="resources/images/delete.png" /></a></td>
											
							</tr>
							<tr >
								<td colspan="2">Osoby z polecenia</td>
								<td><input type="text" value="" name="recommendFirstname"/></td> 
				                 <td><input type="text" value="" name="recommendedLastname"/></td>
				                 <td><input type="text" value="" name="recommendedPhone"/></td>
				                 <td><input type="text" value="" name="recommendedMail"/></td>
								<td style="width: 25px;"><a title="Dodaj" onclick="recommendTable_addRow()" href="#"><img src="resources/images/add.png" /></a></td>
							</tr>
						</tbody>
					</table>
				 					 
					</div>
					</div>
					<h3>Pytanie nr 8</h3>
					<div>
						<h1>W jakim czasie Pani / Pan byłaby / byłby gotów do podjęcia pracy?</h1>
				        <br/><br/>
				        <table>
				           	<tr>
				             	<td width="40px" align="left"><input id="p7check1" type="radio" name="questions.question5" value="W ciągu najbliższych 7dni"/></td>
				                <td><label for="p7check1">W ciągu najbliższych 7dni</label><br/></td>
				            </tr>
				            <tr>
				                <td width="40px" align="left"><input id="p7check2" type="radio" name="questions.question5" value="Do miesiąca"/></td>
				                <td><label for="p7check2">Do miesiąca</label><br/></td>
				            </tr>
				            <tr>
				                <td width="40px" align="left"><input id="p7check3" type="radio" name="questions.question5" value="Powyżej miesiąca" /></td>
				                <td><label for="p7check2">Powyżej miesiąca</label><br/></td>
				           	</tr>
				      	</table>
					
					</div>
					<h3>Klauzula zaufania poufnosci...</h3>
					<div>
						<table>
				          	<tr>
				            	<td width="40px" align="left"><input id="pyt9c" type="radio" name="survey.agree" value="TAK" /> </td>
				                <td><label for="pyt9c">
				                                      "Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę mConnect z siedzibą w Krakowie, ul.Wadowicka 8A, zawartych w ankiecie oraz raporcie ankiety
				                                       <br/>dla potrzeb procesu rekrutacji zgodnie z ustawą z dnia 29/08/1997r Dz/ U/ z 2002r/, Nr 101, poz 923 ze zm/"
				
				                </label></td>
				            </tr>
				            <tr><td>&nbsp</td></tr>
				            <tr>
				            	<td width="40px" align="left"><input id="pyt9cNIE" type="radio" name="survey.agree" value="NIE" /> </td>
				                <td><label for="pyt9ca">Nie wyrażam zgody </label></td>
				            </tr>
				       	</table>
					</div>
					
				</div>
				<div style="margin-top: 30px;">
					<s:textfield name="error" cssStyle="width: 0px"></s:textfield>
				</div>				
				<div class="demo" style="margin-top: 70px;">
						<input type="submit" value="Zapisz"  style="width: 200px; height: 40px; background-color: #1b3c4f; color: white;"/>
						<input type="reset" value="Wyczyść"  style="width: 200px; height: 40px; background-color: #1b3c4f; color: white;"/>
				</div>	
				</center>
			</form>
			
		<%} %>
    </div>
</div>
  </body>
</html>